import {Card, Col, Row} from "antd";
import {getLocale, Link, useIntl} from "@@/exports";
import styles from './styles.css'
import PMO from '@/assets/images/home/main/pmo.png'
import ITSP from '@/assets/images/home/main/itsp.png'
import SO from '@/assets/images/home/main/so.png'

import case1 from '@/assets/images/home/product/bank.png'
import case2 from '@/assets/images/home/product/gu.png'
import case3 from '@/assets/images/home/product/2nft.png'
import case4 from '@/assets/images/home/product/qyb.png'

import action1 from '@/assets/images/home/contact/action1.png'
import action2 from '@/assets/images/home/contact/action2.png'

import partner from '@/assets/images/home/partner/partner.png'
import Texty from 'rc-texty';

export default () => {
    const intl = useIntl();
    const getText = (id: string) => {
        return intl.formatMessage({id})
    }

    const getLocalePrefix = (option: any) => {
        return (id: any) => getText(`${option}.${id}`);
    }

    const getLocaleSuffix = getLocalePrefix('home')
    const ChoiceCard = ({name}: any) => {
        const getLocaleSuffix = getLocalePrefix('home.choices');
        const imageMapper: any = {
            'PMO': PMO,
            'ITSP': ITSP,
            'SO': SO
        }
        const src = imageMapper[name]
        return (
            <Card className={styles.card}>
                <Row justify={'center'}>
                    <img style={{width: '200px'}} src={src} alt={name}/>
                </Row>
                <Row justify={'center'}>
                    <span className={styles.cardTitle}>{getLocaleSuffix(name)}</span>
                </Row>
                <Row justify={'center'}>
                    <span className={styles.cardText}>
                        {getLocaleSuffix(`${name}Text`).split('\n').map((item, index) => (
                            <Col span={24} key={index}>{item}</Col>
                        ))}
                    </span>
                </Row>
            </Card>
        )
    }
    const CaseCard = ({name}: any) => {
        const getLocaleSuffix = getLocalePrefix(`home.products.${name}`);
        const imageMapper: any = {
            'case1': case1,
            'case2': case2,
            'case3': case3,
            'case4': case4
        }
        return (
            <Card style={{height: '180px', width: '660px'}}>
                <Row align={'middle'}>
                    <Col span={4}>
                        <img style={{height: '100px'}} src={imageMapper[name]} alt={name}/>
                    </Col>
                    <Col push={2} span={16}>
                        <h2>{getLocaleSuffix('title')}</h2>
                        <p>{getLocaleSuffix('description')}</p>
                    </Col>
                </Row>
            </Card>
        )
    }
    const ContactCard = ({name}: any) => {
        const getLocaleSuffix = getLocalePrefix(`home.contact.${name}`);
        const imageMapper: any = {
            'action1': action1,
            'action2': action2,

        }
        const {Meta} = Card
        return (
            <div className={styles.contactCard}>
                <div className={styles.imgContainer}>
                    <img style={{width: 220}} src={imageMapper[name]} alt={name}/>
                </div>
                <div className={styles.content}>
                    <Row justify={'center'}>
                        <Row justify={'center'} className={styles.title}>
                            <span>{getLocaleSuffix('title')}</span>
                        </Row>
                        <Row justify={'center'} className={styles.text}>
                            <span>{getLocaleSuffix('description')}</span>
                            <p>{getLocaleSuffix('contactWay')}</p>
                        </Row>
                    </Row>
                </div>
                {/*<Button>{getLocaleSuffix('buttonText')}</Button>*/}
            </div>
        )
    }
    return (
        <div>
            <div className={styles.container}>
                <div className={styles.mainTitle} style={{fontSize: getLocale() === 'en-US' ? '38px' : '64px'}}>
                    <Texty duration={1000} mode={'sync'} type={'mask-bottom'} delay={100}>{getLocaleSuffix('mainTitle')}</Texty>
                </div>
            </div>
            <Row justify={'center'}>
                <div className={styles.titleContainer}>
                    <Row justify={'center'}>
                        <span className={styles.title}>{getLocaleSuffix('choices.title')}</span>
                    </Row>
                    <Row justify={'center'}>
                        <span className={styles.subtitle}>{getLocaleSuffix('choices.subtitle')}</span>
                    </Row>
                    <Row justify={'space-around'}>
                        <Col span={6}><ChoiceCard name={'PMO'}/></Col>
                        <Col span={6}><ChoiceCard name={'ITSP'}/></Col>
                        <Col span={6}><ChoiceCard name={'SO'}/></Col>
                    </Row>
                    <Row justify={'center'}>
                        <Link to={'/product'} className={styles.detailButton}>{getText('buttons.detail')}→</Link>
                    </Row>
                </div>
            </Row>
            <div className={styles.productContainer}>
                <div>
                    <Row justify={'center'}><span
                        className={styles.title}>{getLocaleSuffix('products.title')}</span></Row>
                    <Row justify={'center'}><span
                        className={styles.subtitle}>{getLocaleSuffix('products.subtitle')}</span></Row>
                </div>
                <Row gutter={[0, 20]} justify={'space-around'}>
                    <Row gutter={[20, 20]}>
                        <Col><CaseCard name={'case1'}/></Col>
                        <Col><CaseCard name={'case2'}/></Col>
                    </Row>
                    <Row gutter={[20, 20]}>
                        <Col><CaseCard name={'case3'}/></Col>
                        <Col><CaseCard name={'case4'}/></Col>
                    </Row>
                </Row>

            </div>
            <div className={styles.contactContainer}>
                <Row justify={'center'}><span
                    className={styles.title}>{getLocaleSuffix('contact.title')}</span></Row>
                <Row justify={'center'}><span
                    className={styles.subtitle}>
                    {getLocaleSuffix('contact.subtitle')}</span></Row>
                <Row justify={'space-around'}>
                    <Col span={10}><ContactCard name={'action1'}/></Col>
                    <Col span={10}><ContactCard name={'action2'}/></Col>
                </Row>
            </div>
            <div className={styles.partnerContainer}>
                <Row justify={'center'}><span
                    className={styles.title}>{getLocaleSuffix('partner.title')}</span></Row>
                <Row justify={'center'}><span
                    className={styles.subtitle}>
                    {getLocaleSuffix('partner.subtitle')}</span></Row>
                <Row justify={'center'}>
                    <img width={'65%'} src={partner} alt={''}/>
                </Row>
            </div>
        </div>
    );
};
